<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="/static/base/common/css/sapar.css" />
    <link rel="stylesheet" type="text/css" href="/static/base/common/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/layui.css"/>
    <script type="text/javascript" src="/static/webjars/layui/layui.js"></script>
    <script type="text/javascript" src="/static/base/common/js/jquery.js"></script>
    <script type="text/javascript" src="/static/base/common/js/sapar.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${AK}"></script>
    <title>网格员轨迹</title>
    <style>
        body,html{
            height:100%;
        }
        #mapContainer{
            width:100%;
            margin-top:1%;
            margin-right:1%;
            height:90%;

            }
        <%--百度地图取消显示logo--%>
        .BMap_cpyCtrl {display: none;}
        .anchorBL {display: none;}

        .table-user{
            width:200px;
        }
        .table-user .layui-card{
            width:100%;
            background-color:#0D0D0D;
            color:white;
        }

        .table-user .layui-card-header{
            color:#fff;
            background:#009688;
            font-weight: bolder;
            border-bottom: 0px;
        }

        .table-user .layui-card-body{
            height:500px;
            background-color: #fff;
            overflow-x:hidden ;
            overflow-y: auto;
        }
        .table-user .layui-card-body ul li{
            margin:10px 0px;
            width:100%;
            text-align: left;
        }
        .table-user .layui-card-body ul li .user img{
            padding:0 15px;
            width:50px;
            height:50px;
            border-radius:50%;
        }

        /*滚动条样式设置*/
        .table-user .layui-card .layui-card-body::-webkit-scrollbar,dl::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }
        .table-user .layui-card .layui-card-body::-webkit-scrollbar-thumb,dl::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;     -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.1);
            background: rgba(0,0,255,0.05);
        }
        .table-user .layui-card .layui-card-body::-webkit-scrollbar-track,dl::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0.1);
            border-radius: 0;
            background: rgba(0,0,255,0.05);
        }
    </style>
</head>

<body>
<div id="saper-container" style="height:100%;">
    <div id="saper-hd"></div>
    <div id="saper-bd" style="height:100%;">
        <div class="subfiled clearfix">
            <h2>网格员轨迹</h2>
        </div>
        <div class="subfiled-content" id="mapContainer"></div>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
        <%--表格信息--%>
        <div class="table-user" id="drag" style="position:absolute;z-index: 99;top:20%;right:5%;" >
            <div class="layui-card">
                <div class="layui-card-header">
                    网格员信息
                    <a href="javascript:void(0);" onclick="hidetable();"><i class="fa fa-window-close fa-fw" style="float: right;padding-top:15px;color:white;"></i></a>
                </div>
                <div class="layui-card-body">
                    <ul>
                        <c:forEach items="${list}" var="person">
                            <li>
                                <div class="user">
                                    <a href="#" data-id="${person.id}"><img src="/static/images/special/person.jpg" alt=""/><span>${person.name}</span></a>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="saper-ft"></div>
</div>
</body>
<script type="text/javascript" src="/static/webjars/echarts/echarts.js"></script>
<script type="text/javascript" src="/static/js/supervise/bmap.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById("mapContainer"));
    var trajectoryUrl = "/ajax/ImpPosAjax/get_trajectory";
    var convertDataScatter = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = [data[i].lng,data[i].lat];
            if (geoCoord) {
                if(i==0){
                    res.push({
                        name: '首发地',
                        value: geoCoord.concat(data[i].remarks),
                    });
                }
                if(i == data.length-1){
                    res.push({
                        name: '终点',
                        value: geoCoord.concat(data[i].remarks),
                    });
                }
                res.push({
                    name: i+1,
                    value: geoCoord.concat(data[i].remarks),
                });
            }

        }
        return res;
    };
    var convertDataLine = function (data) {
        var res = [];
        for (var i = 0; i < data.length-1; i++) {
            var fromCoord = [data[i].lng,data[i].lat];
            var toCoord = [data[i+1].lng,data[i+1].lat];

            if (fromCoord && toCoord) {
                res.push({
                    fromName: i,
                    toName: i+1,
                    coords: [fromCoord, toCoord],
                    value: data[i].idIndex
                });
            }

        }
        return res;
    };


    var averageCenter = function(data) {
        var res=[];
        var lngNum=0.0,latNum=0.0;
        for (var i = 0; i < data.length; i++) {
            lngNum+=Number(data[i].lng);
            latNum+=Number(data[i].lat);
        }
        res.push(lngNum/data.length*1.0);
        res.push(latNum/data.length*1.0);
        return res;
    };
    //初始化地图
    var series = [];
    myChart.setOption({
        bmap: {
            center: [105.233777,28.319572],
            zoom: 10,
            roam: true,
        },
        tooltip: {
            trigger: 'item',
        },
        series: series
    });
    var bmap = myChart.getModel().getComponent('bmap').getBMap();
    bmap.addControl(new BMap.MapTypeControl());
    var ecModel = myChart._model;
    var map = null;
    ecModel.eachComponent('bmap', function (bmapModel) {
        if(map == null){
            map = bmapModel.__bmap;
        }
    });

    //关闭卫星
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
    //限制地图的级别
    map.setMinZoom(10);
    map.setMaxZoom(18);

    //设置放大缩小的动画效果
    setTimeout(function(){
        map.setViewport({center:[105.233777,28.319572]},{enableAnimation:true,delay:2000});

        map.setZoom(15);
    }, 2000);  //2秒后放大到14级


    function loadMap(value){
        myChart.clear();
        myChart.setOption({
            bmap: {
                center: [105.233777,28.319572],
                zoom: 10,
                roam: true,
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    console.log(params);
                    return "<div class='container' style='width:300px;height:200px;'>" +
                        "<div class='top layui-row' style='width:300px;height:100px;'>"+
                        "<div class='image layui-col-sm4' style='height:100px;'>"+
                        "<img src='/static/images/special/person.jpg' width='100px' height='100px'/>" +
                        "</div>"+
                        "<div class='info layui-col-sm8'  style='height:100px;'>"+
                        "<div class='username layui-row'>姓名："+value.person.name+"</div>" +
                        "<div class='sex layui-row'>性别："+value.person.sex+"</div>" +
                        "<div class='identity layui-row'>出生日期："+value.person.born+"</div>" +
                        "<div class='family layui-row'>联系电话："+value.person.tellphone+"</div>" +
                        "<div class='nowPlace layui-row'>现居地："+value.person.nowPlace+"</div>" +
                        "</div>"+
                        "</div>"+
                        "<div class='down layui-row' style='width:300px;height:100px;'>"+
                        "<div class='intro layui-row'>事情简介：</div>" +
                        "<div class='intro layui-row'>"+params.value[2]+"</div>" +
                        "</div>"+
                        "</div>";
                }
            },
            series: [
                {
                    type: 'lines',
                    coordinateSystem: 'bmap',
                    zlevel: 2,
                    symbol: ['none', 'arrow'],
                    symbolSize: 10,
                    /*  effect: {
                          show: true,
                          period: 6,
                          trailLength: 0,
                          symbol: planePath,
                          symbolSize: 15
                      },*/
                    lineStyle: {
                        normal: {
                            color: '#60ff44',
                            width: 1,
                            opacity: 0.6,
                            curveness: 0.2
                        }
                    },
                    data: convertDataLine(value.trajectory)
                },
                {
                    /* name: 'Top 5',*/
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',
                    data: convertDataScatter(value.trajectory),
                    symbolSize: function (val) {
                        var posi = Number(val[0]);
                        return posi/5;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            color:'#05C3F9',
                            show: true,
                            fontSize:15
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#05C3F9',
                            shadowBlur: 10,
                            shadowColor: '#05C3F9'
                        }
                    },
                    zlevel: 1
                },
            ]


        },true);

        var bmap = myChart.getModel().getComponent('bmap').getBMap();
        bmap.addControl(new BMap.MapTypeControl());


        var ecModel = myChart._model;
        var map = null;
        ecModel.eachComponent('bmap', function (bmapModel) {
            if(map == null){
                map = bmapModel.__bmap;
            }
        });

        //关闭卫星
        map.addControl(new BMap.MapTypeControl({
            mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]}));

        //限制地图的级别
        map.setMinZoom(10);
        map.setMaxZoom(18);

        //设置放大缩小的动画效果
        setTimeout(function(){
            map.setViewport({center:averageCenter(value.trajectory)},{enableAnimation:true,delay:2000});
            map.setZoom(12);
        }, 2000);  //2秒后放大到14级
    }
    $('a').click(function (){
        var perId = $(this).attr("data-id");
        $.getJSON(trajectoryUrl,"id="+perId+"&&username=",function (value) {
            loadMap(value);
        });
    });

</script>
</html>